<template>
<div>
  <div class="head">
    <div class="top">
      <div class="icon">
        搜 赞
      </div>
    </div>
  </div>

  <div class="swiper-container" style="height:200px">
    <div class="swiper-wrapper">
      <div class="swiper-slide" style="background:red;">slide1</div>
      <div class="swiper-slide" style="background:green;">slide1</div>
      <div class="swiper-slide" style="background:yellow;">slide1</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination abc"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- 如果需要滚动条 -->
    <!-- <div class="swiper-scrollbar"></div> -->
  </div>

  <!-- <ul>
      <li v-for="list in ctgLists" :key="list.id" >
        <img :src="list.imgsrc" alt="">
        <p>{{list.title}}</p>
      </li>
    </ul> -->
  <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="falg" infinite-scroll-distance="10">
    <li v-for="list in shopLists" :key="list.id">
      <p>{{list.title}}</p>
      <p>{{list.star}}</p>
      <ul v-for="(yhj,index) in list.yhj" :key="'yhj'+index">
        <li>
          <b>{{yhj.type}}{{yhj.title}}</b>
        </li>
      </ul>
    </li>
  </ul>
</div>
</template>

<script>
import $ from "jquery";
import Swiper from "swiper";
import "swiper/dist/css/swiper.min.css";

// import infiniteScroll from 'vue-infinite-scroll'
export default {
  // directives: {infiniteScroll},
  data() {
    return {
      ctgLists: [],
      shopLists: [],
      flag: true
    };
  },
  mounted() {
    var mySwiper = new Swiper(".swiper-container", {
      direction: "horizontal",
      loop: true,
      // 如果需要分页器
      pagination: {
        el: ".abc"
      },
      // 如果需要前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
      },

      // 如果需要滚动条
      // scrollbar: {
      //   el: ".swiper-scrollbar"
      // }
    });
  },
  created() {
    this.getCtgList();
    this.getShopList();
    $(window).scroll(() => {
      let st = $(document).scrollTop() / 100;
      if (st > 1) {
        st = 1;
        $(".icon").addClass("icon-end");
        return;
      } else {
        $(".icon").removeClass("icon-end");
      }
      $(".top").css("background", "rgba(36, 105, 34," + st + ")");
      $(".head").css("background", "rgba(36, 105, 34," + (1 - st) + ")");
    });
  },
  methods: {
    loadMore() {
      this.flag = false;
      setTimeout(() => {
        this.getShopList();
        this.flag = true;
      }, 1000);
    },
    getCtgList() {
      $.get(this.apiurl + "/ctg/list").done(result => {
        this.ctgLists = result.data;
      });
    },
    getShopList() {
      $.get(this.apiurl + "/shop/list").done(result => {
        this.shopLists = this.shopLists.concat(result.data);
      });
    }
  }
};
</script>

<style>
.head {
  height: 100px;
  background: rgba(36, 105, 34, 1);
}

.top {
  height: 50px;
  width: 100%;
  position: fixed;
  top: 0;
  background: rgba(36, 105, 34, 0.2);
}

.top .icon {
  line-height: 50px;
  color: white;
  float: right;
  margin-right: -18px;
  transition: 0.5s;
}

.top .icon-end {
  margin-right: 0;
  transition: 0.5s;
}
</style>